
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
        <meta name="description" content="ESP8266/ESP32 WLAN configuration at run time with web interface">
      
      
        <meta name="author" content="Hieromon Ikasamo">
      
      
        <link rel="canonical" href="https://Hieromon.github.io/AutoConnect/basicusage.html">
      
      
        <link rel="prev" href="menu.html">
      
      
        <link rel="next" href="advancedusage.html">
      
      <link rel="icon" href="assets/images/favicon.png">
      <meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.9">
    
    
      
        <title>Basic usage - AutoConnect for ESP8266/ESP32</title>
      
    
    
      <link rel="stylesheet" href="assets/stylesheets/main.0d440cfe.min.css">
      
        
        <link rel="stylesheet" href="assets/stylesheets/palette.2505c338.min.css">
      
      

    
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="css/paragraph.css">
    
      <link rel="stylesheet" href="css/extra.css">
    
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
    
    <script>__md_scope=new URL(".",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
  


  
  


  <script id="__analytics">function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","G-EHK8XV10VE"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","G-EHK8XV10VE",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=G-EHK8XV10VE",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>

  
    <script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
  

    
    
    
  </head>
  
  
    
    
    
    
    
    <body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
  
    
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#simple-usage" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

<header class="md-header" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href="index.html" title="AutoConnect for ESP8266/ESP32" class="md-header__button md-logo" aria-label="AutoConnect for ESP8266/ESP32" data-md-component="logo">
      
  <img src="images/arduino-logo.svg" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            AutoConnect for ESP8266/ESP32
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Basic usage
            
          </span>
        </div>
      </div>
    </div>
    
    
    
      <label class="md-header__button md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    Hieromon/AutoConnect
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    


<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href="index.html" title="AutoConnect for ESP8266/ESP32" class="md-nav__button md-logo" aria-label="AutoConnect for ESP8266/ESP32" data-md-component="logo">
      
  <img src="images/arduino-logo.svg" alt="logo">

    </a>
    AutoConnect for ESP8266/ESP32
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/Hieromon/AutoConnect" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M439.55 236.05 244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
  </div>
  <div class="md-source__repository">
    Hieromon/AutoConnect
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="index.html" class="md-nav__link">
        Overview
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="gettingstarted.html" class="md-nav__link">
        Getting started
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="menu.html" class="md-nav__link">
        AutoConnect menu
      </a>
    </li>
  

    
      
      
      

  
  
    
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          Basic usage
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="basicusage.html" class="md-nav__link md-nav__link--active">
        Basic usage
      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#simple-usage" class="md-nav__link">
    Simple usage
  </a>
  
    <nav class="md-nav" aria-label="Simple usage">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#embed-to-the-sketches" class="md-nav__link">
     Embed to the Sketches
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#basic-usage" class="md-nav__link">
    Basic usage
  </a>
  
    <nav class="md-nav" aria-label="Basic usage">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#basic-logic-sequence-for-the-user-sketches" class="md-nav__link">
     Basic logic sequence for the user Sketches
  </a>
  
    <nav class="md-nav" aria-label=" Basic logic sequence for the user Sketches">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#1-a-typical-logic-sequence" class="md-nav__link">
    1. A typical logic sequence
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#2-declare-autoconnect-object" class="md-nav__link">
    2. Declare AutoConnect object
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#3-no-need-wifibegin" class="md-nav__link">
    3. No need WiFI.begin(...)
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#4-alternate-esp8266webserverbegin-and-webserverbegin" class="md-nav__link">
    4. Alternate ESP8266WebServer::begin() and WebServer::begin()
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#5-autoconnectbegin-with-ssid-and-password" class="md-nav__link">
    5. AutoConnect::begin with SSID and Password
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#6-use-esp8266webserveron-and-webserveron-to-handle-url" class="md-nav__link">
    6. Use ESP8266WebServer::on and WebServer::on to handle URL
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient" class="md-nav__link">
    7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#esp8266webserverwebserver-hosted-or-parasitic" class="md-nav__link">
     ESP8266WebServer/WebServer hosted or parasitic
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#reducing-binary-size" class="md-nav__link">
    Reducing Binary Size
  </a>
  
    <nav class="md-nav" aria-label="Reducing Binary Size">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#using-autoconnect-full-component" class="md-nav__link">
     Using AutoConnect Full component
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#using-autoconnectcore-without-custom-web-pages-and-ota-update-facilities" class="md-nav__link">
     Using AutoConnectCore without Custom Web pages and OTA Update facilities
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
      
      
      
        <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="0">
          Advanced usage
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_5">
          <span class="md-nav__icon md-icon"></span>
          Advanced usage
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="advancedusage.html" class="md-nav__link">
        Advanced usage
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adconnection.html" class="md-nav__link">
        AutoConnect WiFi connection control
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adcpcontrol.html" class="md-nav__link">
        Captive portal control
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adnetwork.html" class="md-nav__link">
        Settings and controls for network and WiFi
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adauthentication.html" class="md-nav__link">
        Authentication settings
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adcredential.html" class="md-nav__link">
        Credential accesses
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adexterior.html" class="md-nav__link">
        Customizing page appearance
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="adothers.html" class="md-nav__link">
        Other operation settings and controls
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_6" >
      
      
      
        <label class="md-nav__link" for="__nav_6" id="__nav_6_label" tabindex="0">
          Custom Web pages
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_6_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_6">
          <span class="md-nav__icon md-icon"></span>
          Custom Web pages
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acintro.html" class="md-nav__link">
        Custom Web pages with AutoConnect
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acelements.html" class="md-nav__link">
        AutoConnectElements
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acjson.html" class="md-nav__link">
        Custom Web pages with JSON
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="achandling.html" class="md-nav__link">
        Handling the custom Web pages
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acinteract.html" class="md-nav__link">
        Interact between Sketch and AutoConnectElements
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_7" >
      
      
      
        <label class="md-nav__link" for="__nav_7" id="__nav_7_label" tabindex="0">
          OTA Updates
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_7_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_7">
          <span class="md-nav__icon md-icon"></span>
          OTA Updates
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="otaupdate.html" class="md-nav__link">
        OTA Updates
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="otabrowser.html" class="md-nav__link">
        OTA via Web Browser
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="otaserver.html" class="md-nav__link">
        OTA using Update Server
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="filesystem.html" class="md-nav__link">
        Using Filesystem
      </a>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_9" >
      
      
      
        <label class="md-nav__link" for="__nav_9" id="__nav_9_label" tabindex="0">
          Library APIs
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_9_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_9">
          <span class="md-nav__icon md-icon"></span>
          Library APIs
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="api.html" class="md-nav__link">
        AutoConnect API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiaux.html" class="md-nav__link">
        AutoConnectAux API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiconfig.html" class="md-nav__link">
        AutoConnectConfig API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apielements.html" class="md-nav__link">
        AutoConnectElements API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiupdate.html" class="md-nav__link">
        AutoConnectUpdate API
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="apiextra.html" class="md-nav__link">
        Something extra
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_10" >
      
      
      
        <label class="md-nav__link" for="__nav_10" id="__nav_10_label" tabindex="0">
          Examples
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_10_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_10">
          <span class="md-nav__icon md-icon"></span>
          Examples
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="howtoembed.html" class="md-nav__link">
        How to embed
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="datatips.html" class="md-nav__link">
        Tips for data conversion
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="menuize.html" class="md-nav__link">
        Attach the menus
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="wojson.html" class="md-nav__link">
        Custom Web pages w/o JSON
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="esp32cam.html" class="md-nav__link">
        Works with ESP32-CAM
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    
    <li class="md-nav__item md-nav__item--nested">
      
      
      
      
      <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_11" >
      
      
      
        <label class="md-nav__link" for="__nav_11" id="__nav_11_label" tabindex="0">
          Appendix
          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_11_label" aria-expanded="false">
        <label class="md-nav__title" for="__nav_11">
          <span class="md-nav__icon md-icon"></span>
          Appendix
        </label>
        <ul class="md-nav__list" data-md-scrollfix>
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="lsbegin.html" class="md-nav__link">
        Inside AutoConnect::begin
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="credit.html" class="md-nav__link">
        Saved credentials access
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="acupload.html" class="md-nav__link">
        File upload handler
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="colorized.html" class="md-nav__link">
        Custom colorized
      </a>
    </li>
  

            
          
            
              
  
  
  
    <li class="md-nav__item">
      <a href="changelabel.html" class="md-nav__link">
        Change label text
      </a>
    </li>
  

            
          
        </ul>
      </nav>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="faq.html" class="md-nav__link">
        FAQ
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="changelog.html" class="md-nav__link">
        Change log
      </a>
    </li>
  

    
      
      
      

  
  
  
    <li class="md-nav__item">
      <a href="license.html" class="md-nav__link">
        License
      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#simple-usage" class="md-nav__link">
    Simple usage
  </a>
  
    <nav class="md-nav" aria-label="Simple usage">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#embed-to-the-sketches" class="md-nav__link">
     Embed to the Sketches
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#basic-usage" class="md-nav__link">
    Basic usage
  </a>
  
    <nav class="md-nav" aria-label="Basic usage">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#basic-logic-sequence-for-the-user-sketches" class="md-nav__link">
     Basic logic sequence for the user Sketches
  </a>
  
    <nav class="md-nav" aria-label=" Basic logic sequence for the user Sketches">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#1-a-typical-logic-sequence" class="md-nav__link">
    1. A typical logic sequence
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#2-declare-autoconnect-object" class="md-nav__link">
    2. Declare AutoConnect object
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#3-no-need-wifibegin" class="md-nav__link">
    3. No need WiFI.begin(...)
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#4-alternate-esp8266webserverbegin-and-webserverbegin" class="md-nav__link">
    4. Alternate ESP8266WebServer::begin() and WebServer::begin()
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#5-autoconnectbegin-with-ssid-and-password" class="md-nav__link">
    5. AutoConnect::begin with SSID and Password
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#6-use-esp8266webserveron-and-webserveron-to-handle-url" class="md-nav__link">
    6. Use ESP8266WebServer::on and WebServer::on to handle URL
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient" class="md-nav__link">
    7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
        
          <li class="md-nav__item">
  <a href="#esp8266webserverwebserver-hosted-or-parasitic" class="md-nav__link">
     ESP8266WebServer/WebServer hosted or parasitic
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#reducing-binary-size" class="md-nav__link">
    Reducing Binary Size
  </a>
  
    <nav class="md-nav" aria-label="Reducing Binary Size">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#using-autoconnect-full-component" class="md-nav__link">
     Using AutoConnect Full component
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#using-autoconnectcore-without-custom-web-pages-and-ota-update-facilities" class="md-nav__link">
     Using AutoConnectCore without Custom Web pages and OTA Update facilities
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  



  <h1>Basic usage</h1>

<h2 id="simple-usage">Simple usage<a class="headerlink" href="#simple-usage" title="Permanent link">&para;</a></h2>
<h3 id="embed-to-the-sketches"><i class="fa fa-edit"></i> Embed to the Sketches<a class="headerlink" href="#embed-to-the-sketches" title="Permanent link">&para;</a></h3>
<p>How embed the AutoConnect to the Sketches you have. Most simple approach to applying AutoConnect for the existing Sketches, follow the below steps. The below Sketch is for ESP8266. For ESP32, replace <code>ESP8266WebServer</code> with <code>WebServer</code> and <code>ESP8266WiFi.h</code> with <code>WiFi.h</code> respectively.</p>
<p><img src="images/BeforeAfter.svg" /></p>
<p><i class="fa fa-edit"></i> Insert <code class="highlight"><span class="cp">#include</span> <span class="cpf">&lt;AutoConnect.h&gt;</span></code> to behind of <code class="highlight"><span class="cp">#include</span> <span class="cpf">&lt;ESP8266WebServer.h&gt;</span></code>.</p>
<p><i class="fa fa-edit"></i> Insert <code class="highlight"><span class="na">AutoConnect</span> <em>PORTAL(WEBSERVER);</em></code> to behind of <code class="highlight"><span class="na">ESP8266WebServer</span> <em>WEBSERVER;</em></code> declaration.<sup id="fnref:1"><a class="footnote-ref" href="#fn:1" rel="footnote">1</a></sup></p>
<p><i class="fa fa-edit"></i> Remove <code class="highlight">WiFi.<span class="na">begin</span>(<em>SSID</em>,<em>PSK</em>)</code> and the subsequent logic for the connection status check.</p>
<p><i class="fa fa-edit"></i> Replace <code class="highlight"><em>WEBSERVER</em>.<span class="na">begin</span><span class="p">()</span></code> to <code class="highlight"><em>PORTAL</em>.<span class="na">begin</span><span class="p">()</span></code>.<sup id="fnref:2"><a class="footnote-ref" href="#fn:2" rel="footnote">2</a></sup></p>
<p><i class="fa fa-edit"></i> Replace <code class="highlight"><em>WEBSERVER</em>.<span class="na">handleClient</span><span class="p">()</span></code> to <code class="highlight"><em>PORTAL</em>.<span class="na">handleClient</span><span class="p">()</span></code>.<sup id="fnref:3"><a class="footnote-ref" href="#fn:3" rel="footnote">3</a></sup></p>
<p><i class="fa fa-edit"></i> If the connection checks logic is needed, you can check the return value according to <code class="highlight"><em>PORTAL</em>.<span class="na">begin</span><span class="p">()</span></code> with <code class="highlight">true</code> or <code class="highlight">false</code>.</p>
<h2 id="basic-usage">Basic usage<a class="headerlink" href="#basic-usage" title="Permanent link">&para;</a></h2>
<h3 id="basic-logic-sequence-for-the-user-sketches"><i class="fa fa-caret-right"></i> Basic logic sequence for the user Sketches<a class="headerlink" href="#basic-logic-sequence-for-the-user-sketches" title="Permanent link">&para;</a></h3>
<h4 id="1-a-typical-logic-sequence">1. A typical logic sequence<a class="headerlink" href="#1-a-typical-logic-sequence" title="Permanent link">&para;</a></h4>
<div class="admonition note">
<ol>
<li><strong>Include headers,</strong> <code>ESP8266WebServer.h</code>/<code>WebServer.h</code> and <code>AutoConnect.h</code>  </li>
<li><strong>Declare an ESP8266WebServer variable for ESP8266 or a WebServer variable for ESP32.</strong>  </li>
<li><strong>Declare an AutoConnect variable.</strong>  </li>
<li><strong>Implement the URL handlers provided for the </strong><code>on</code><strong> method of ESP8266WebServer/WebServer with the <em>function()</em>.</strong>  </li>
<li><strong>setup()</strong><br />
   5.1 <strong>Sets URL handler the <em>function()</em> to ESP8266WebServer/WebServer by</strong><code>ESP8266WebServer::on</code><strong>/</strong><code>WebServer::on</code><strong>.</strong><br />
   5.2 <strong>Starts </strong><code>AutoConnect::begin()</code><strong>.</strong><br />
   5.3 <strong>Check WiFi connection status.</strong>  </li>
<li><strong>loop()</strong><br />
   6.1 <strong>Do the process for actual Sketch.</strong><br />
   6.2 <strong>Invokes </strong><code>AutoConnect::handleClient()</code><strong>, or invokes </strong><code>ESP8266WebServer::handleClient()</code><strong>/</strong><code>WebServer::handleClient</code><strong> then </strong><code>AutoConnect::handleRequest()</code><strong>.</strong>  </li>
</ol>
</div>
<h4 id="2-declare-autoconnect-object">2. Declare AutoConnect object<a class="headerlink" href="#2-declare-autoconnect-object" title="Permanent link">&para;</a></h4>
<p><a href="#esp8266webserver-hosted-or-parasitic">Two options</a> are available for <a href="api.html#constructors">AutoConnect constructor</a>.</p>
<p><div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnect </span><span style="color: #a6e22e">VARIABLE</span><span style="color: #f8f8f2">(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">ESP8266WebServer);  </span><span style="color: #75715e">// For ESP8266</span>
<span style="color: #f8f8f2">AutoConnect </span><span style="color: #a6e22e">VARIABLE</span><span style="color: #f8f8f2">(</span><span style="color: #f92672">&amp;</span><span style="color: #f8f8f2">WebServer);         </span><span style="color: #75715e">// For ESP32</span>
</code></pre></div>
or</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #f8f8f2">AutoConnect VARIABLE;</span>
</code></pre></div>
<ul>
<li>
<p><strong>The parameter with an ESP8266WebServer/WebServer variable:</strong> An ESP8266WebServer/WebServer object variable must be declared. AutoConnect uses its variable to handles the <a href="menu.html">AutoConnect menu</a>.</p>
</li>
<li>
<p><strong>With no parameter:</strong> the Sketch does not declare ESP8266WebServer/WebServer object. In this case, AutoConnect allocates an instance of the ESP8266WebServer/WebServer internally. The logic sequence of the Sketch is somewhat different as the above. To register a URL handler function by <em>ESP8266WebServer::on</em> or <em>WebServer::on</em> should be performed after <a href="api.html#begin"><em>AutoConnect::begin</em></a>.</p>
</li>
</ul>
<h4 id="3-no-need-wifibegin">3. No need WiFI.begin(...)<a class="headerlink" href="#3-no-need-wifibegin" title="Permanent link">&para;</a></h4>
<p>AutoConnect internally performs <em>WiFi.begin</em> to establish a WiFi connection. There is no need for a general process to establish a connection using <em>WiFi.begin</em> with a Sketch code.</p>
<h4 id="4-alternate-esp8266webserverbegin-and-webserverbegin">4. Alternate ESP8266WebServer::begin() and WebServer::begin()<a class="headerlink" href="#4-alternate-esp8266webserverbegin-and-webserverbegin" title="Permanent link">&para;</a></h4>
<p><a href="api.html#begin"><em>AutoConnect::begin</em></a> executes <em>ESP8266WebServer::begin</em>/<em>WebServer::begin</em> internally too and it starts the DNS server to behave as a Captive portal. So it is not needed to call <em>ESP8266WebServer::begin</em>/<em>WebServer::begin</em> in the Sketch.</p>
<div class="admonition info">
<p class="admonition-title">Why DNS Server starts</p>
<p>AutoConnect traps the detection of the captive portal and achieves a connection with the WLAN interactively by the AutoConnect menu. It responds SoftAP address to all DNS queries temporarily to trap. Once a WiFi connection establishes, the DNS server contributed by AutoConnect stops.</p>
</div>
<h4 id="5-autoconnectbegin-with-ssid-and-password">5. AutoConnect::begin with SSID and Password<a class="headerlink" href="#5-autoconnectbegin-with-ssid-and-password" title="Permanent link">&para;</a></h4>
<p>SSID and Password can also specify by <a href="api.html#begin"><em>AutoConnect::begin</em></a>. ESP8266/ESP32 uses provided SSID and Password explicitly. If the connection false with specified SSID with Password then a captive portal is activated. SSID and Password are not present, ESP8266 SDK will attempt to connect using the still effectual SSID and password. Usually, it succeeds.</p>
<h4 id="6-use-esp8266webserveron-and-webserveron-to-handle-url">6. Use ESP8266WebServer::on and WebServer::on to handle URL<a class="headerlink" href="#6-use-esp8266webserveron-and-webserveron-to-handle-url" title="Permanent link">&para;</a></h4>
<p>AutoConnect is designed to coexist with the process for handling the web pages by user Sketches. The page processing function which will send an HTML to the client invoked by the "<em>on::ESP8266WebServer</em>" or the "<em>on::WebServer</em>" function is the same as when using ESP8266WebServer/WebServer natively.</p>
<h4 id="7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient">7. Use either ESP8266WebServer::handleClient()/WebServer::handleClient() or AutoConnect::handleClient()<a class="headerlink" href="#7-use-either-esp8266webserverhandleclientwebserverhandleclient-or-autoconnecthandleclient" title="Permanent link">&para;</a></h4>
<p>Both classes member function name is the same: <em>handleClient</em>, but the behavior is different. Using the AutoConnect embedded along with ESP8266WebServer::handleClient/WebServer::handleClient has limitations. Refer to the below section for details. </p>
<h3 id="esp8266webserverwebserver-hosted-or-parasitic"><i class="fa fa-caret-right"></i> ESP8266WebServer/WebServer hosted or parasitic<a class="headerlink" href="#esp8266webserverwebserver-hosted-or-parasitic" title="Permanent link">&para;</a></h3>
<p>The interoperable process with an ESP8266WebServer/WebServer depends on the parameters of the <a href="api.html#constructors">AutoConnect constructor</a>.</p>
<table>
<thead>
<tr>
<th>Declaration parameter for the constructor</th>
<th>Use ESP8266WebServer::handleClient or WebServer::handleClient only</th>
<th>Use AutoConnect::handleClient</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="api.html#constructors">None</a></td>
<td>AutoConnect menu not available.<br>To use AutoConnect menu, need <a href="api.html#handlerequest">AutoConnect::handleRequest()</a>.<br>also to use ESP8266WebServer/WebServer natively, need <a href="api.html#host">AutoConnect::host()</a>.</td>
<td>AutoConnect menu available.<br>To use ESP8266WebServer/WebServer natively, need <a href="api.html#host">AutoConnect::host()</a>.</td>
</tr>
<tr>
<td><a href="api.html#withparameter">Reference to ESP8266WebServer/WebServer</a></td>
<td>AutoConnect menu not available.<br>To use AutoConnect menu, need <a href="api.html#handlerequest">AutoConnect::handleRequest()</a>.</td>
<td>AutoConnect menu available.</td>
</tr>
</tbody>
</table>
<ul>
<li>
<p><strong>By declaration for the AutoConnect variable with no parameter</strong>: The ESP8266WebServer/WebServer instance is hosted by AutoConnect automatically then the Sketches use <a href="api.html#host"><em>AutoConnect::host</em></a> as API to get it after <a href="api.html#begin"><em>AutoConnect::begin</em></a> performed.</p>
</li>
<li>
<p><strong>By declaration for the AutoConnect variable with the reference of ESP8266WebServer/WebServer</strong>: AutoConnect will use it. the Sketch can use it is too.</p>
</li>
<li>
<p><strong>In use ESP8266WebServer::handleClient()/WebServer::handleClient()</strong>: AutoConnect menu can be dispatched but not works normally. It is necessary to call <a href="api.html#void-handlerequest"><em>AutoConnect::handleRequest</em></a> after <em>ESP8255WebServer::handleClient</em>/<em>WebServer::handleClient</em> invoking.</p>
</li>
<li>
<p><strong>In use <a href="api.html#void-handleclient">AutoConnect::handleClient()</a></strong>: The handleClient() process and the AutoConnect menu is available without calling <em>ESP8266WebServer::handleClient</em>.</p>
</li>
</ul>
<div class="admonition info">
<p class="admonition-title">Why AutoConnect::handleRequest is needed when using ESP8266WebServer::handleClient/WebServer::handleClient</p>
<p>The AutoConnect menu function may affect WiFi connection state. It follows that the menu process must execute outside <em>ESP8266WebServer::handleClient</em> and <em>WebServer::handleClient</em>.<br />
<a href="api.html#void-handleclient"><em>AutoConnect::handleClient</em></a> is equivalent <em>ESP8266WebServer::handleClient</em> and <em>WEbServer::handleClient</em> included <a href="api.html#void-handlerequest"><em>AutoConnect::handleRequest</em></a>.</p>
</div>
<h2 id="reducing-binary-size">Reducing Binary Size<a class="headerlink" href="#reducing-binary-size" title="Permanent link">&para;</a></h2>
<p>Typically, AutoConnect components include <a href="acelements.html">AutoConnectAux</a> for handling <a href="acintro.html">Custom Web pages</a>; AutoConnectAux plays a central role in responding to requests for Custom Web pages. It also incorporates several AutoConnectElements used in the sketch, which may exceed 1 MB in binary size after the build. To reduce the binary size, you can deactivate the component to handle these custom web pages, depending on the use case. If your sketch does not use Custom web pages, allows you to exclude the AutoConnectAux component to reduce the built binary size.</p>
<p><a href="api.html#autoconnecth"><strong><code>AutoConnect.h</code></strong></a> header file enables all AutoConnect components. In a normal sketch, including this header enables all AutoConnect functionality.<br />
On the other hand, for sketches that don't use custom web pages, you can apply the <a href="api.html#autoconnectcoreh"><strong><code>AutoConnectCore.h</code></strong></a> header file.</p>
<p><a href="api.html#autoconnectcoreh"><strong><code>AutoConnectCore.h</code></strong></a> provides an AutoConnect class that excludes AutoConnectAux and AutoConnectElements from AutoConnect. Therefore, it does not implement the APIs required for custom web page processing. Also, <a href="otabrowser.html">AutoConnectOTA</a> and <a href="otaserver.html">AutoConnectUpdate</a> cannot be used. (i.e., to use AutoConnect's equipped OTA Update feature, you must include the full AutoConnect component in your sketch) Instead, the binary size of the AutoConnectCore component is reduced by about 170 KB (1.3 KB for RAM) compared to the ESP32 AutoConnect full component. (60KB for ESP8266)</p>
<p>To switch between AutoConnect and AutoConnectCore, simply change the corresponding header file with <code>#include</code> header.</p>
<h3 id="using-autoconnect-full-component"><i class="fa fa-edit"></i> Using AutoConnect Full component<a class="headerlink" href="#using-autoconnect-full-component" title="Permanent link">&para;</a></h3>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;WiFi.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;WebServer.h&gt;</span>
<span style="background-color: #49483e"><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;AutoConnect.h&gt;</span>
</span>
<span style="color: #66d9ef">static</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">const</span><span style="color: #f8f8f2"> </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> PAGE_HELLO[] </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">R&quot;(</span>
<span style="color: #e6db74">{</span>
<span style="color: #e6db74">  &quot;uri&quot;: &quot;/&quot;,</span>
<span style="color: #e6db74">  &quot;title&quot;: &quot;Hello&quot;,</span>
<span style="color: #e6db74">  &quot;menu&quot;: false,</span>
<span style="color: #e6db74">  &quot;element&quot;: [</span>
<span style="color: #e6db74">    {</span>
<span style="color: #e6db74">      &quot;name&quot;: &quot;caption&quot;,</span>
<span style="color: #e6db74">      &quot;type&quot;: &quot;ACText&quot;,</span>
<span style="color: #e6db74">      &quot;value&quot;: &quot;Hello, World&quot;</span>
<span style="color: #e6db74">    },</span>
<span style="color: #e6db74">  ]</span>
<span style="color: #e6db74">}</span>
<span style="color: #e6db74">)&quot;</span><span style="color: #f8f8f2">;</span>

<span style="color: #f8f8f2">WebServer Server;</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnect </span><span style="color: #a6e22e">Portal</span><span style="color: #f8f8f2">(Server);</span>
</span><span style="color: #f8f8f2">AutoConnectConfig Config;</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  Serial.begin(</span><span style="color: #ae81ff">115200</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  Serial.println();</span>

<span style="color: #f8f8f2">  Config.ota </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> AC_OTA_BUILTIN;</span>
<span style="color: #f8f8f2">  Portal.config(Config);</span>

<span style="color: #f8f8f2">  portal.load(PAGE_HELLO);</span>
<span style="color: #f8f8f2">  Portal.begin();</span>
<span style="color: #f8f8f2">  Serial.println(</span><span style="color: #e6db74">&quot;Web Server started:&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> WiFi.localIP().toString());</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  Portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<h3 id="using-autoconnectcore-without-custom-web-pages-and-ota-update-facilities"><i class="fa fa-edit"></i> Using AutoConnectCore without Custom Web pages and OTA Update facilities<a class="headerlink" href="#using-autoconnectcore-without-custom-web-pages-and-ota-update-facilities" title="Permanent link">&para;</a></h3>
<p>Even in the sketch with <code>AutoConnectCore.h</code> applied, the class name remains <code>AutoConnect</code>.</p>
<div class="highlight" style="background: #272822"><pre style="line-height: 125%;"><span></span><code><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;WiFi.h&gt;</span>
<span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;WebServer.h&gt;</span>
<span style="background-color: #49483e"><span style="color: #75715e">#include</span><span style="color: #f8f8f2"> </span><span style="color: #75715e">&lt;AutoConnectCore.h&gt;</span>
</span>
<span style="color: #f8f8f2">WebServer Server;</span>
<span style="background-color: #49483e"><span style="color: #f8f8f2">AutoConnect </span><span style="color: #a6e22e">Portal</span><span style="color: #f8f8f2">(Server);</span>
</span>
<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">rootPage</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  </span><span style="color: #66d9ef">char</span><span style="color: #f8f8f2"> content[] </span><span style="color: #f92672">=</span><span style="color: #f8f8f2"> </span><span style="color: #e6db74">&quot;Hello, World&quot;</span><span style="color: #f8f8f2">;</span>
<span style="color: #f8f8f2">  Server.send(</span><span style="color: #ae81ff">200</span><span style="color: #f8f8f2">, </span><span style="color: #e6db74">&quot;text/plain&quot;</span><span style="color: #f8f8f2">, content);</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">setup</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  delay(</span><span style="color: #ae81ff">1000</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  Serial.begin(</span><span style="color: #ae81ff">115200</span><span style="color: #f8f8f2">);</span>
<span style="color: #f8f8f2">  Serial.println();</span>

<span style="color: #f8f8f2">  Server.on(</span><span style="color: #e6db74">&quot;/&quot;</span><span style="color: #f8f8f2">, rootPage);</span>
<span style="color: #f8f8f2">  Portal.begin();</span>
<span style="color: #f8f8f2">  Serial.println(</span><span style="color: #e6db74">&quot;Web Server started:&quot;</span><span style="color: #f8f8f2"> </span><span style="color: #f92672">+</span><span style="color: #f8f8f2"> WiFi.localIP().toString());</span>
<span style="color: #f8f8f2">}</span>

<span style="color: #66d9ef">void</span><span style="color: #f8f8f2"> </span><span style="color: #a6e22e">loop</span><span style="color: #f8f8f2">() {</span>
<span style="color: #f8f8f2">  Portal.handleClient();</span>
<span style="color: #f8f8f2">}</span>
</code></pre></div>
<div class="admonition info">
<p class="admonition-title">Either <code>AutoConnect.h</code> or <code>AutoConnectCore.h</code></p>
<p>A sketch can include either <code>AutoConnect.h</code> or <code>AutoConnectCore.h</code>. These two header files are mutually exclusive and cannot be included together at the same time.<br />
Also, If the sketch includes <code>AutoConnectCore.h</code>, some members involved in the custom web page facility are excluded from <a href="apiconfig.html">AutoConnectConfig</a> class.</p>
</div>
<div class="footnote">
<hr />
<ol>
<li id="fn:1">
<p>Each <em>VARIABLE</em> conforms to the actual declaration in the Sketches.&#160;<a class="footnote-backref" href="#fnref:1" title="Jump back to footnote 1 in the text">&#8617;</a></p>
</li>
<li id="fn:2">
<p>WiFi SSID and Password can be specified AutoConnect::begin() too.&#160;<a class="footnote-backref" href="#fnref:2" title="Jump back to footnote 2 in the text">&#8617;</a></p>
</li>
<li id="fn:3">
<p>Replacement the <strong>handleClient</strong> method is not indispensable. AutoConnect can still connect with the captive portal as it is ESP8266WebServer::handleClient. But it can <strong>not valid AutoConnect menu</strong>.&#160;<a class="footnote-backref" href="#fnref:3" title="Jump back to footnote 3 in the text">&#8617;</a></p>
</li>
</ol>
</div>


  




                
              </article>
            </div>
          
          
        </div>
        
          <a href="#" class="md-top md-icon" data-md-component="top" hidden>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8v12Z"/></svg>
            Back to top
          </a>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright &copy; 2018-2023 Hieromon Ikasamo
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
        <div class="md-social">
  
    
    
      
      
    
    <a href="https://github.com/Hieromon" target="_blank" rel="noopener" title="github.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
    </a>
  
    
    
      
      
    
    <a href="https://twitter.com/hieromon" target="_blank" rel="noopener" title="twitter.com" class="md-social__link">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc.--><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    <script id="__config" type="application/json">{"base": ".", "features": ["navigation.top"], "search": "assets/javascripts/workers/search.db81ec45.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="assets/javascripts/bundle.a00a7c5e.min.js"></script>
      
        <script src="js/gifffer.min.js"></script>
      
    
  </body>
</html>